<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/swiper-bundle.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        a {
            text-decoration: none;
        }

        ul {
            list-style: none;
        }

        img {
            vertical-align: auto;
        }

        .clearfix::after {
            clear: both;
            content: '';
            display: block;
        }

        header {
            position: fixed;
            width: 100%;
            height: 45px;

            margin: 0 auto;

            top: 0;
            overflow: hidden;
            z-index: 20;
            display: flex;
            justify-content: space-around;
            flex-wrap: nowrap;
            min-width: 540px;
        }

        .red {
            background-color: rgb(228, 49, 48);
        }

        .floor {
            position: relative;
            background: url(./imgs/bj1.png)no-repeat 0px -30px;
            background-size: cover;
            height: 310px;
            width: 100%;
            min-width: 540px;
        }

        .logo_f {
            width: 40px;
            height: 100%;
            margin-right: 15px;
        }

        .logo_f img {
            margin: 15px 17px;
            width: 21px;
            height: 18px;

        }

        .top_form {
            position: relative;
            margin-top: 6px;


            border-radius: 15px;
            background: rgb(247, 247, 247);
            height: 30px;
            width: 79%;
        }

        .top_form::before {
            content: '';
            display: block;
            position: absolute;
            top: 6px;
            left: 43px;
            width: 2px;
            height: 16px;
            background: rgb(211, 198, 198);
        }

        .JD {

            position: absolute;
            top: 7px;
            left: 15px;
            display: block;
        }

        .seach {
            position: absolute;
            top: 7px;
            left: 50px;
            display: block;
            width: 18px;
            height: 15px;
            background: url(./imgs/jd-sprites.png) no-repeat -80px 0;
            background-size: 200px;
        }

        .JD img {
            width: 20px;
            height: 15px;
        }

        .top_inp {
            outline: none;
            border: none;
            margin: 3px;
            width: 84%;
            height: 20px;
            background: rgb(247, 247, 247);
            margin-right: 10px;
            text-indent: 1em;
        }

        .top_r {
            margin-left: 10px;
            margin-top: 7px;
            width: 30px;
            height: 30px;
            color: white;
            font-size: 14px;
            display: block;
            text-align: center;
            line-height: 30px;
        }

        /* swiper */
        .swiper {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;


            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 95%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
        }

        .swiper {
            margin-left: auto;
            margin-right: auto;
        }

        .banner {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 80%;
        }

        .section1 {
            width: 100%;
            background: rgb(246, 246, 246);
        }

        .heater {
            width: 540px;
            margin: auto;
            height: 166px;

        }

        .heater_l {
            position: relative;
            width: 24%;
            height: 100%;
            background: url(./imgs/left1.png)no-repeat;
            background-size: contain;
            background-color: #fff;
        }

        .heater_l img {
            position: absolute;
            top: 36px;
            left: 27px;
            width: 83px;
            height: 83px;

        }

        .heater_l::after {
            content: '电脑数码';
            font-size: 12px;
            color: #fff;
            display: block;
            position: absolute;
            bottom: 17px;
            left: 44px;
        }

        .heater_c {
            position: relative;
            width: 52%;
            height: 100%;
            background: url(./imgs/center.gif)no-repeat;
            background-size: contain;
            background-color: #fff;
        }

        .heater_c img {
            position: absolute;
            top: 31px;
            width: 96px;
            height: 96px;
        }

        .heater_c .img1 {
            left: 29px;
        }

        .heater_c .img2 {
            left: 150px;
        }

        .heater_r {
            position: relative;
            width: 24%;
            height: 100%;
            background: url(./imgs/right.png)no-repeat;
            background-size: contain;
            background-color: #fff;
        }


        .heater_r img {
            position: absolute;
            top: 52px;
            left: 25px;
            width: 73px;
            height: 68px;
        }

        .heater_r::after {
            content: '洋河盛典';
            font-size: 12px;
            color: #fff;
            display: block;
            position: absolute;
            bottom: 17px;
            left: 40px;
        }

        .section2 {
            width: 100%;
            height: 245px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            min-width: 540px;
        }

        .section2>div {
            width: 20%;
            height: 107px;
        }

        .section2 img {
            width: 58px;
            height: 58px;
        }

        .section2 p {
            text-align: center;
            color: #666;
            font-size: 17px;
           
        }
        .wrng{
            display: flex;
            flex-direction:column;
            justify-content: center;
            align-items: center;
        }
        .section3{
            width: 100%;
            min-width: 540px;
            display: flex;
            justify-content:space-evenly;
        }
        .section3 > div{
            width: 40%;
            
            flex: 1;
        }
        .section3 > div > img{
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <header class="">
        <div class="logo_f "><img src="./imgs/下载 (1).png" alt=""></div>
        <form class="top_form ">
            <span class="JD"><img src="./imgs/logo.png" alt=""></span>
            <span class="seach"></span>
            <input class="top_inp fr" type="text" placeholder="敲的头皮发麻">
        </form>
        <div class="top_r fr">登录</div>
    </header>
    <!-- 轮播图 -->
    <div class="floor">
        <div class="banner">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./imgs/lbt1.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./imgs/lbt2.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./imgs/lbt3.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./imgs/lbt4.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./imgs/lbt5.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./imgs/lbt6.jpg" alt=""></div>
                </div>
                <!-- <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div> -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>
    <!-- 年货 -->
    <div class="section1">
        <div class="heater">
            <div class="heater_l fl">
                <img src="./imgs/e8583dec02cb1487.jpg!q70.jpg" alt="">
            </div>
            <div class="heater_c fl">
                <img class="img1" src="./imgs/center111.jpg" alt="">
                <img class="img2" src="./imgs/1ce5f7a9a660a376.jpg!q70.jpg" alt="">
            </div>
            <div class="heater_r fl">
                <img src="./imgs/584ea198c6949f3a.jpg!q70.jpg" alt="">
            </div>
        </div>
    </div>
    <!-- logo -->
    <div class="section2">
       
        
    </div>

    <!-- 商品 -->
    <div class="section3">
        <div class="section2-l">
            <img src="./imgs/5EQN5NP@@TBHZ2{3{2(I[K0.png" alt="">
            <img src="./imgs/5EQN5NP@@TBHZ2{3{2(I[K0.png" alt="">
            <img src="./imgs/5EQN5NP@@TBHZ2{3{2(I[K0.png" alt="">
            <img src="./imgs/5EQN5NP@@TBHZ2{3{2(I[K0.png" alt="">
            <img src="./imgs/5EQN5NP@@TBHZ2{3{2(I[K0.png" alt="">
        </div>
        <div class="section2-r">
            <img src="./imgs/5EQN5NP@@TBHZ2{3{2(I[K0.png" alt="">
            <img src="./imgs/5EQN5NP@@TBHZ2{3{2(I[K0.png" alt="">
            <img src="./imgs/5EQN5NP@@TBHZ2{3{2(I[K0.png" alt="">
            <img src="./imgs/5EQN5NP@@TBHZ2{3{2(I[K0.png" alt="">
        </div>
    </div>




    <script src="./lib/swiper-bundle.min.js"></script>
    <script>

        // swiper插件初始化
        function headerSwiper() {
            var swiper = new Swiper(".mySwiper", {
                slidesPerView: 1,
                spaceBetween: 50,
                centeredSlides: true,
                autoplay: {
                    delay: 2000,
                    disableOnInteraction: false   //点击指示器是否停止轮播
                },
                loop: true,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                // navigation: {
                //     nextEl: ".swiper-button-next",
                //     prevEl: ".swiper-button-prev",
                // },
            });

        }
        headerSwiper()

        // 页面滑动时头部的背景颜色变红
        let header = document.querySelector('header')
        window.addEventListener('scroll', function () {
            // console.log(document.documentElement.scrollTop);
            if (document.documentElement.scrollTop > 1) {

                header.classList.add('red')
            } else {

                header.classList.remove('red')
            }
        })

        // 动态渲染（Dynamic rendering）
        let arr = [
            { src: './imgs/images/icon-01.png', text: '京东超市' },
            { src: './imgs/images/icon-02.png', text: '数码电器' },
            { src: './imgs/images/icon-03.png', text: '京东服饰' },
            { src: './imgs/images/icon-04.png', text: '京东生鲜' },
            { src: './imgs/images/icon-05.png', text: '京东到家' },
            { src: './imgs/images/icon-06.png', text: '充值缴费' },
            { src: './imgs/images/icon-07.png', text: '物流查询' },
            { src: './imgs/images/icon-08.png', text: '领卷' },
            { src: './imgs/images/icon-09.png', text: '领金帖' },
            { src: './imgs/images/icon-010.png', text: 'PLUS会员' },
        ]

        let section2 = document.querySelector('.section2')
        console.log(section2);
        arr.forEach(function(k,i){
            let d = document.createElement('div')
            d.innerHTML = `
                            <div class="wrng">
                                <div>
                                    <img src="${arr[i].src}" alt="">
                                    <p>${arr[i].text}</p>
                                </div>
                            </div>
                          `
                  console.log(d);
            section2.appendChild(d)
        })


    </script>
</body>

</html>